<!--
 * @Author: your name
 * @Date: 2019-10-26 19:15:47
 * @LastEditTime: 2019-11-15 16:49:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \simple\src\components\feedback\index.vue
 -->
<template>
  <div class="feedback">
    <div class="input">
      <span>反馈:</span>
      <el-input
        placeholder="可输入也可点击反馈标签以键入"
        v-model="input"
        size="small"
        clearable>
      </el-input>
    </div>
    <div class="tag">
        <el-tag :key="i"  v-for="(tag,i) in dynamicTags" :type="items[i%5]" closable :disable-transitions="false" @close="handleClose(tag)"  @click="sendFeedback(i)">
            {{tag}}
        </el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      inputVisible: false,
      inputValue: '',
      items: ['', 'success', 'info', 'danger', 'warning']
    }
  },
  computed: {
    dynamicTags () {
      return this.$store.getters['label/label/labelList']
    }
  },
  created () {
    this.getLabel()
  },
  methods: {
    getLabel () {
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      console.log(userInfo.id)
      this.$store.dispatch('label/label/getLabel', userInfo.id)
    },
    handleClose (tag) {
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.$store.dispatch('label/label/delLabel', { userId: userInfo.id, message: tag })
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    sendFeedback (i) {
      this.input = this.dynamicTags[i]
      console.log(this.input)
      this.$emit('getComment', this.input)
    },
    handleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.$store.dispatch('label/label/addLabel', { id: userInfo.id, message: inputValue })
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .feedback{
    margin-top: 10px;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    // 输入框
    .input{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width:28%;
      span{
        width: 60px;
      }
    }
    // 标签
    .tag{
      width:70%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 10px;
      margin-left: 10px;
       .el-tag {
        margin-left: 10px;
        margin-bottom: 10px;
      }
      .el-tag:hover{
        cursor: pointer;
      }
      .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 10px;
      }
      .input-new-tag {
        width: 90px;
        margin-left: 10px;
        margin-bottom: 10px;
        vertical-align: bottom;
      }
    }
  }
</style>>
